<template>
  <div class="baseBox">
    <Card>
      <Form v-model:form="form" :formList="formList" layout="inline" @save="search">
        <template #change_type>
          <a-select v-model:value="form.change_type" placeholder="请选择">
            <a-select-option :value="item.id" v-for="(item,index) in changeTypeList" :key="index">{{item.name}}</a-select-option>
          </a-select>
        </template>
      </Form>
    </Card>
    <Table class="mt_20 flex" :width="1200" :dataSource="list" :rowSelection="rowSelection" :columns="columns" :pagination="pagination" @handleChangeList="handleChangeList">
      <template #header>
        <div class="d_f w_100b">
          <a-space>
            <a-button type="primary" @click="delList">批量删除 </a-button>
          </a-space>
        </div>
      </template>
      <template v-slot:number>
        <div style="cursor: pointer;" @click="clickSort('id')">
          <span>序号</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:btTitle>
        <div style="cursor: pointer;" @click="clickSort('title')">
          <span>标题</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:lyType>
        <div style="cursor: pointer;" @click="clickSort('source_type')">
          <span>来源</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:wzUrl>
        <div style="cursor: pointer;" @click="clickSort('url')">
          <span>网址链接</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:gjContent>
        <div style="cursor: pointer;" @click="clickSort('content')">
          <span>告警内容</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:gjTime>
        <div style="cursor: pointer;" @click="clickSort('created_at')">
          <span>告警时间</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:gjStatus>
        <div style="cursor: pointer;" @click="clickSort('status')">
          <span>状态</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template #dict="{ value }">
        {{ value?.dict || '-' }}
      </template>
      <template #status="{ value }">
        <!-- 类型 1关闭 2开启 -->
        <span v-if="value == 2" style="color: #2bcdc4">告警</span>
        <span v-if="value == 1" style="color: #ff544c">关闭</span>
      </template>
       <template #user="{ value }">
        <span>{{value?.username || '-'}}</span>
      </template>
      <template #action="{ value }">
        <a-space>
          <a-button
            v-if="value.status == 2"
            type="primary"
            @click="videoSwitch(value)"
            >关闭告警
          </a-button>
          <a-button
            v-if="value.status == 1"
            type="primary"
            @click="videoSwitch(value)"
            >开启告警
          </a-button>
          <a-popconfirm
            title="是否删除？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="del(value)"
          >
            <a-button type="primary">删除网址 </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { formList, dataSource, columns } from "./href";
import Card from "@/components/Card";
import Form from "@/components/Form";
import Table from "@/components/Table";
import { warningApi } from "@/api/warning";
const app = getCurrentInstance();
const $this = app.appContext.config.globalProperties; //全局变量
const form = ref({});
const list = ref([]);
const selectInfo = ref({});
import store from "@/store";

const changeTypeList = [
  {
    id: 1,
    name: '标题变化'
  },
  {
    id: 2,
    name: '关键词变化'
  },
  {
    id: 3,
    name: '描述变化'
  },
  {
    id: 4,
    name: 'SEO 变化'
  },
  {
    id: 5,
    name: '链接跳转变化'
  },
  {
    id: 6,
    name: '百度安全检测'
  }
]

const importVisible = ref(false);

let pagination =ref({
  total: 0,
  current: 1,
  defaultPageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '50', '100']
})

let selectedKeys = ref([])
let setSelectedKeys = ref([])

const onSelectChange = (selectedRowKeys, selectedRows) => {
    selectedKeys.value = selectedRowKeys
    console.log(selectedRowKeys);
  };

let rowSelection =ref({
  selectedKeys,
  onChange: onSelectChange
})

let currentPage = 1;
let pageNum = 10;

onMounted(() => {
  getData();
});
function search() {
  currentPage = 1;
  pagination.value.current = 1;
  getData();
}
async function getData() {
  const result = await warningApi.page({
    page: currentPage,
    limit: pageNum,
    token: store.getters.user.token,
    ...form.value,
  });
  const { data } = result;
  pagination.value.total = result.total;
  list.value = data;
}
function handleChangeList(e){
  currentPage = e.current //当前页数
  pageNum = e.pageSize //每页显示条数
  pagination.value.current = e.current;
  getData()
}

async function del(item) {
  const { id } = item;
  await warningApi.delete({
    id,
  });

  // list.value = list.value.filter((i) => i.id != id);
  reload()
}
function reload() {
  selectedKeys.value = []
  getData();
}

async function videoSwitch(item) {
  const { id, status } = item;
  await warningApi.switch({
    id,
  });
  if (status == 1) item.status = 2;
  if (status == 2) item.status = 1;
}
async function delList() {
  if(selectedKeys.value.length > 0){
    // console.log(selectedKeys.value.join(','))
    await warningApi.deleteList({
      ids: selectedKeys.value.join(','),
    });
    reload()
  }
}
</script>

<style lang="less" scoped></style>
